<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
	<ui:define name="headIncludes">
		<f:event listener="#{funcionarioBean.initializeForm(param.funcionarioId)}" type="preRenderView"/>
		
			<style>
				.panel100 {
					width:100px;
				}
				
				.panel400 {
					width:400px;
				}
				
				.panel150{
					width:150px;
				}
				
				.panel350 {
					width:350px;
				}
			
				.panel80 {
					width:80px;
				}
				
				.panel200 {
					width:200px;
				}
				
				.panel250 {
					width:250px;
				}
				
				.panel20 {
					width:20px;
				}
				
				.panel100 {
					width:100px;
				}
				
				.panel120 {
					width:120px;
				}
				.panel97 {
					width:97px;
				}
				
				.panel145 {
					width: 145px;
				}
		</style>
	</ui:define>
	
	<ui:define name="pageName">Detalhe de Funcionário</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Editar" style="height:28px;" action="#{funcionarioBean.changeToEdit}" icon="ui-icon-pencil"/>
		<p:commandButton value="Excluir" style="height:28px;" onclick="popupConfirmDeleteDetail.show()" icon="ui-icon-trash"/>
		<p:commandButton value="Voltar" style="height:28px;" action="#{funcionarioBean.changeToList}" process="@this" icon="ui-icon-arrowreturnthick-1-w"/>
	</ui:define>
	
	<ui:define name="content">
		<p:panel>
			<div>
				<p:messages id="messageFormFuncionario" autoUpdate="true" closable="true"/>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel100, panel400, panel150">
					<h:outputText style="font-weight:bold;" value="Código" />
					<h:outputText style="font-weight:bold;" value="Nome" />
					<h:outputText style="font-weight:bold;" value="Data de nascimento" />
					<h:outputText style="font-weight:bold;" value="Sexo" />
					
					<h:outputText value="#{funcionarioBean.currentFuncionario.id}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.nome}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.dataNascimento}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</h:outputText>
					<h:outputText value="#{funcionarioBean.currentFuncionario.sexo}"/> 
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel350, panel80, panel120">
					<h:outputText style="font-weight:bold;" value="Logradouro" />
					<h:outputText style="font-weight:bold;" value="Número" />
					<h:outputText style="font-weight:bold;" value="Complemento" />
					<h:outputText style="font-weight:bold;" value="Bairro" />
									
					<h:outputText value="#{funcionarioBean.currentFuncionario.logradouro}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.numero}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.complemento}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.bairro}"/>
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel150, panel200, panel200">			
					<h:outputText style="font-weight:bold;" value="CEP" />		
					<h:outputText style="font-weight:bold;" value="Cidade" />	
					<h:outputText style="font-weight:bold;" value="Estado" />	
					<h:outputText style="font-weight:bold;" value="País" />		
					
					<h:outputText value="#{funcionarioBean.currentFuncionario.cep}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.cidade.cidade}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.cidade.estado.estado}"/>	
					<h:outputText value="#{funcionarioBean.currentFuncionario.cidade.estado.pais.pais}"/>				
				</h:panelGrid>
				
				<h:panelGrid columns="5" style="padding:5px;" columnClasses="panel20, panel97, panel20, panel100">			
					<h:outputText style="font-weight:bold;" value="Telefone" />		
					<h:outputText style="font-weight:bold;" value="" />	
					<h:outputText style="font-weight:bold;" value="Celular" />	
					<h:outputText style="font-weight:bold;" value="" />		
					<h:outputText style="font-weight:bold;" value="E-mail" />
					
					<h:outputText value="#{funcionarioBean.currentFuncionario.cidade.ddd}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.telefone}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.cidade.ddd}"/>	
					<h:outputText value="#{funcionarioBean.currentFuncionario.celular}"/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.email}"/>				
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel150, panel145, panel150">			
					<h:outputText style="font-weight:bold;" value="RG" />
					<h:outputText style="font-weight:bold;" value="CPF" />	
					<h:outputText style="font-weight:bold;" value="Carteira de trabalho" />
					<h:outputText style="font-weight:bold;" value="Cargo" />
					
					<h:outputText value="#{funcionarioBean.currentFuncionario.rg}"  placeHolder=" "/>
					<h:outputText value="#{funcionarioBean.currentFuncionario.cpf}">
						<f:converter converterId="cpfConverter" /> 
					</h:outputText>
					<h:outputText value="#{funcionarioBean.currentFuncionario.carteiraTrabalho}"/>	
					<h:outputText value="#{funcionarioBean.currentFuncionario.cargo.cargo}"/>	
				</h:panelGrid>
				
				<h:panelGrid columns="4" style="padding:5px;" columnClasses="panel150, panel145, panel150">			
					<h:outputText style="font-weight:bold;" value="Salário" />		
					<h:outputText style="font-weight:bold;" value="Comissão" />
					<h:outputText style="font-weight:bold;" value="Data de admissão" />	
					<h:outputText style="font-weight:bold;" value="Data de demissão" />
					
					<h:outputText value="#{funcionarioBean.currentFuncionario.salario}">
						<f:convertNumber pattern="R$ #,###,##0.00" />
					</h:outputText>
					<h:outputText value="#{funcionarioBean.currentFuncionario.comissao}">
						<f:convertNumber pattern="R$ #,###,##0.00" />
					</h:outputText>
					<h:outputText value="#{funcionarioBean.currentFuncionario.dataAdmissao}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</h:outputText>
					<h:outputText value="#{funcionarioBean.currentFuncionario.dataDemissao}">
						<f:convertDateTime pattern="dd/MM/yyyy"/>
					</h:outputText>				
				</h:panelGrid>

				<div style="padding-top:10px;">
					<p:dataTable var="servico" rendered="#{funcionarioBean.currentFuncionario.servicos.size() > 0}"
						value="#{funcionarioBean.currentServicos}"
						paginator="true" rows="10" paginatorPosition="bottom"
						emptyMessage="Não há registros" id="tableServicos">  
						
						<p:column headerText="Código" style="width:150px;">  
					    	<h:outputText value="#{servico.id}" />  
						</p:column>  
				 
						<p:column headerText="Descrição">  
					    	<h:outputText value="#{servico.descricao}" />  
						</p:column> 	
				  	</p:dataTable>
				</div>
			</div>
		</p:panel>				
	</ui:define>
	<ui:define name="popups">
		<ui:include src="listCidade.xhtml"/>		
		<ui:include src="listCargo.xhtml"/>		
		<ui:include src="listServico.xhtml"/>
		
		<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmDeleteDetail"
			width="300" resizable="false" header="Confirmação de exclusão" height="90">
			<h:form>
				<div style="margin-top: 10px;">
					<h:outputText value="Confirma a exclusão do registro?"/>
				</div>
				<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
					<p:commandButton value="Excluir" actionListener="#{funcionarioBean.removeFromDetail}" oncomplete="popupConfirmDeleteDetail.hide()" icon="ui-icon-trash"/>
					<p:commandButton value="Cancelar" onclick="popupConfirmDeleteDetail.hide()" icon="ui-icon-cancel"/>
				</div>		
			</h:form>			
		</p:dialog>
		
		<p:dialog id="completeDialogDelete" header="Confirmação de exclusão" closable="false"
			widgetVar="completeDeletePopup" width="300" resizable="false">
			<h:form>
			<div style="margin-top: 10px;">Excluído com sucesso!</div>
			
			<div align="right" style="margin-top: 15px; margin-bottom: 15px;" > 
				<p:commandButton id="complete" value="Fechar" oncomplete="completeDeletePopup.hide()" icon="ui-icon-close"  
					action="#{funcionarioBean.changeToList}" />
			</div>
			</h:form>
		</p:dialog>
		
	</ui:define>
</ui:composition>